<template>
  <div class="container">
    <div ref="searchRef">
      <el-form :inline="true" :model="params" class="grids gridColumns5">
        <el-form-item label="开班时间">
          <DatePicker v-model="params.classOpeningTime" @fatherMethods="onSubmit"></DatePicker>
        </el-form-item>
        <el-form-item label="班级名称">
          <el-input v-model="params.className" placeholder="班级名称" clearable @change="onSubmit" />
        </el-form-item>
        <el-form-item label="班级老师">
          <el-input v-model="params.classTeacher" placeholder="班级老师" />
        </el-form-item>
        <el-form-item label="授课地点">
          <el-input v-model="params.classAddress" placeholder="授课地点" />
        </el-form-item>
        <el-form-item label="班级状态">
          <el-select collapse-tags collapse-tags-tooltip :max-collapse-tags="2" multiple v-model="params.status" placeholder="班级状态" clearable @change="onSubmit">
            <el-option :label="item.label" :value="item.value" v-for="item in classStateOptions" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="授课老师">
          <el-input v-model="params.teachingTeacher" placeholder="授课老师" clearable @change="onSubmit" />
        </el-form-item>
        <el-form-item label="班级编号">
          <el-input v-model="params.classId" placeholder="班级编号" clearable @change="onSubmit" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="init">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="actionBtn">
        <el-button type="primary" @click="proxy.$refs.addClassRef.open()">新增班级</el-button>
      </div>
    </div>

    <el-table :max-height="tableHeight" :data="tableData.rows" v-loading="loading">
      <el-table-column prop="classOpeningTime" label="开班时间" width="170" />
      <el-table-column prop="className" label="班级名称">
        <template #default="scope">
          <div @click="proxy.$utils.toLink(`/classManage/classDetailsToC?classId=${scope.row._id}`)" class="className">{{scope.row.className}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="classAddress" label="授课地点" width="250" />
      <el-table-column prop="classId" label="班级编号" width="130" />
      <el-table-column prop="classTeacher" label="班级老师" width="100" show-overflow-tooltip />
      <el-table-column prop="teachingTeacher" label="授课讲师" width="100" show-overflow-tooltip />
      <el-table-column prop="classNum" label="班级人数" width="100">
        <template #default="scope">
          {{scope.row.class_students? scope.row.class_students.length:0}} / {{scope.row.classNum}}
        </template>
      </el-table-column>
      <el-table-column prop="address" label="排班课时" width="100">
        <template #default="scope">
          {{unitClassHours_format(scope.row)}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="班级状态" width="100" fixed="right">
        <template #default="scope">
          <el-text type="warning" v-if="scope.row.status == 0">待开班</el-text>
          <el-text type="success" v-else-if="scope.row.status == 1">开班</el-text>
          <el-text type="info" v-else>结业</el-text>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" align="center" fixed="right">
        <template #default="scope">
          <div class="flex alignCenter">
            <div class="actionText" @click="handleClick(scope.row,1)">班级学员</div>
            <el-divider direction="vertical" class="line" />
            <el-dropdown>
              <div class="flex alignCenter">
                <div class="actionText">更多</div>
                <el-icon><arrow-down /></el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="handleClick(scope.row,3)" :disabled="!scope.row.classTeacherId || scope.row.status==2">结业</el-dropdown-item>
                  <el-dropdown-item @click="handleClick(scope.row,4)">删除</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <Pagination v-if="tableData['total']" :total="tableData['total']" v-model:page="params.pageIndex" v-model:limit="params.pageSize" @pagination="getInfo" />

    <updateClass ref="addClassRef" @fatherMethod="getInfo"></updateClass>
  </div>
</template>

<script setup lang="ts">
import updateClass from "@/views/courseManage/components/updateClassToC.vue";
const { proxy } = getCurrentInstance();
//counter
import useCounterStore from "@/store/counter";
const counter = useCounterStore();

let classStateOptions = ref([
  { label: "待开班", value: 0 },
  { label: "开班", value: 1 },
  { label: "结业", value: 2 },
]);

let params = ref({
  classOpeningTime: "",
  className: "",
  classTeacher: "",
  classAddress: "",
  status: "",
  teachingTeacher: "", //授课老师
  pageIndex: 1,
  pageSize: 50,
  classId: "",
});
let tableData = ref({});
let loading = ref(false);
let searchHeight = ref(0);

let tableHeight = computed(() => {
  let hei =
    window.innerHeight - 84 - counter.pageHeight - 55 - searchHeight.value;
  return `${hei}px`;
});

onMounted(() => {
  getInfo();
  searchHeight.value = proxy.$refs.searchRef.offsetHeight;
});

function onSubmit() {
  params.value.pageIndex = 1;
  getInfo();
}

function unitClassHours_format(item) {
  let { unitClassHours, classDates, classHours } = item;
  return `${classDates.length * unitClassHours} / ${classHours}`;
}

function lesson_hours_format(item) {
  let { teaching_signInComplete, classHours } = item;
  if (!teaching_signInComplete) return `0 / ${classHours}`;
  let total_hours = 0;
  teaching_signInComplete.forEach((element) => {
    if (teaching_signInComplete) total_hours += element.unitClassHours;
  });
  return `${total_hours} / ${classHours}`;
}

async function handleClick(row, num) {
  try {
    if (!counter.isShowActionBtn(row)) return;
    switch (num) {
      case 1:
        proxy.$utils.toLink(
          `/classManage/classDetailsToC?classId=${row._id}&current=2`
        );
        break;
      case 2:
        proxy.$utils.toLink(
          `/classManage/classDetailsToC?classId=${row._id}&current=3`
        );
        break;
      case 3: //结业
        let ret = await proxy.$utils.confirmTips("是否确认结业?");
        if (!ret) return;
        await proxy.$apis.classToC({
          type: "graduation",
          data: { _id: row._id },
        });
        proxy.$utils.showToast("结业成功");
        getInfo();
        break;
      case 4:
        let resp = await proxy.$utils.confirmTips("是否确认删除该班级?");
        if (!resp) return;
        await proxy.$apis.classToC({
          type: "del",
          data: { _id: row._id },
        });
        proxy.$utils.showToast("删除成功");
        getInfo();
        break;
      default:
        break;
    }
  } catch (error) {
    console.log("error", error);
  }
}

async function getInfo() {
  try {
    loading.value = true;
    tableData.value = await proxy.$apis.classToC({
      type: "list",
      data: params.value,
    });
    console.log("tableData.value", tableData.value);
  } catch (error) {
  } finally {
    loading.value = false;
  }
}

function init() {
  params.value = {
    classOpeningTime: "",
    className: "",
    classTeacher: "",
    classAddress: "",
    status: "",
    teachingTeacher: "", //授课老师
    pageIndex: 1,
    pageSize: 50,
    classId: "",
  };
  getInfo();
}
</script>



<style lang="scss" scoped>
.container {
  margin: 20px;
  .actionBtn {
    margin-bottom: 20px;
  }
  .actionText {
    cursor: pointer;
    color: var(--el-color-primary);
    font-size: 14px;
    white-space: nowrap;
  }
  .line {
    height: 20px;
  }
  .className {
    cursor: pointer;
    color: #ca5f20;
  }
}
</style>